<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ time }} {{ source }}</span>
    </div>
    <h1 style="text-align: center;font-size: 30px;">{{ content[0].content }}</h1>

    <div class="text item" v-for="(item, index) in content" :key="index">
      <p v-if="item.type == 'text'">{{ item.content }}</p>
      <p v-else> <img :src="item.imageUrl" alt=""> </p>
    </div>
    <div style="margin-top: 100px;margin-left: 1300px;">
      <i @click="onclickLike" :class="{ 'styled-text': islikeData }" style="font-size: 30px;">♡</i><span
        style="font-size: 20px;">点赞</span>
      <i @click="onclickCollect" :class="{ 'styled-text': isCollectData }" style="font-size: 30px;">✰</i><span
        style="font-size: 20px;">收藏</span>
    </div>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      // isStyled: this.islikeData,
      // isStyled2: this.isCollectData,
      isCollectData: '',
      islikeData: ''
    }
  },
  computed: {
    ...mapState("user", ["user"]),

  }
  ,
  props: ['source', 'time', 'content', 'news_id']
  ,
  created() {
    this.isCollect(),
      this.islike()

  }

  ,
  methods: {
    onclickLike() {
      //  console.log(this.news_id);
      console.log(this.islikeData);
      if (this.islikeData == false) {
        this.axios.post(`http://localhost:3000/users/thumbsUp`, {
        uid: this.user[0].uid,
          news_id: this.$route.params.id}  
        )
          .then(res => {
            this.islike()
            this.collect = res.data.msg;
            // console.log(this.collect);
          })
          .catch(error => {
            // 请求失败时，处理错误  
            console.error(error);
          });

      } else {
        // console.log(this.user[0].uid);
        // console.log(this.$route.params.id);
        // console.log(`uid=${this.user[0].uid}&news_id=${this.$route.params.id}`);
        this.axios.delete(`http://localhost:3000/users/cancelThumbsUp`, {
          data: {
            uid: this.user[0].uid,
            news_id: this.$route.params.id
          }
        })
          .then(res => {
            this.collect = res.data.msg;
            // console.log(res.data.msg);
            this.islike()
            // this.isStyled = this.islikeData // 切换isStyled的值  
          }).catch(error => {
            console.error(error);
          }
          )
      }

    }
    ,
    onclickCollect() {
      console.log(this.isCollectData);
      console.log(this.user[0].uid);
      console.log(this.$route.params.id);
      if (this.isCollectData == false) {
        this.axios.post(`http://localhost:3000/users/collectNews`, {
          
            uid: this.user[0].uid,
            news_id: this.$route.params.id
          
        })
          .then(res => {
            // 请求成功时，处理返回的数据  
            this.collect = res.data.msg;
            console.log(this.collect);
            this.isCollect()

          })
          .catch(error => {
            // 请求失败时，处理错误  
            console.error(error);

          });

      } else {
        this.axios.delete(`http://localhost:3000/users/cancelCollection`, {
          data: {
            uid: this.user[0].uid,
            news_id: this.$route.params.id
          }

        }).then(res => {
          this.collect = res.data.msg;
          console.log(res.data.msg);
          this.isCollect()
        }).catch(error => {
          console.error(error);
        }
        )
      }

    },
    isCollect() {
      this.axios.get(`http://localhost:3000/users/isCollect?news_id=${this.$route.params.id}&uid=${this.user[0].uid}`).
        then(res => {
          this.isCollectData = res.data.data
          console.log(this.isCollectData);
          // console.log(1010);
        }).catch(err => {
          console.log(err);
        })
    },
    islike() {
      this.axios.get(`http://localhost:3000/users/isThumbsUp?news_id=${this.$route.params.id}&uid=${this.user[0].uid}`).
        then(res => {
          this.islikeData = res.data.data
          // console.log(this.islikeData);
          // console.log(1010);
        }).catch(err => {
          console.log(err);
        })
    }
  },

}
</script>

<style scoped>
.styled-text {
  /* 定义你想要的样式 */
  color: red;
  font-weight: bold;

}
</style>